<template>
  <div class="environmental-info">
    <div class="title blueTitleStyle">环境信息</div>

    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.name"
          :name="''+index"
          v-for="(item,index) in auxiliaryEvn"
          :key="index"
          class="main-tab"
        >
          <div class="centerbox" :class="{activeInfoStyle:activeInfo===1}">
            <div class="Temperature">
              <i class="iconfont iconwendu"></i>
              <div class="text">温度</div>
              <div
                class="info"
                v-if="item['040203']&&item['040203'].value"
              >{{item['040203'].value + item['040203'].unit}}</div>
              <div
                class="info"
                v-else-if="item['040102']&&item['040102'].value"
              >{{item['040102'].value + item['040102'].unit}}</div>
              <div class="info" v-else>--</div>
            </div>
            <div class="Humidity">
              <i class="iconfont iconIOTtubiao_huabanfuben"></i>
              <div class="text">湿度</div>
              <div
                class="info"
                v-if="item['040204']&&item['040204'].value"
              >{{item['040204'].value + item['040204'].unit}}</div>
              <div
                class="info"
                v-else-if="item['040103']&&item['040103'].value"
              >{{item['040103'].value + item['040103'].unit}}</div>
              <div class="info" v-else>--</div>
            </div>
            <div class="windSpe">
              <i class="iconfont iconfengsu"></i>
              <div class="text">风速</div>
              <div class="info" v-if="item['040201']&&item['040201'].value">{{item['040201'].value + item['040201'].unit}}</div>
              <div class="info" v-else>--</div>
            </div>
          </div>
          <div class="centerbox" :class="{activeInfoStyle:activeInfo===2}">
            <div class="wind">
              <i class="iconfont iconfengli"></i>
              <div class="text">风力</div>
              <div class="info" v-if="item['myFeng']">{{item['myFeng']}}</div>
              <div class="info" v-else>--</div>
            </div>
            <div class="directionTheWind">
              <i class="iconfont iconfengxiang-copy-copy"></i>
              <div class="text">风向</div>
              <div class="info" v-if="item['040202']&&item['040202'].value">{{item['040202'].value + item['040202'].unit}}</div>
              <div class="info" v-else>--</div>
            </div>
            <div class="rainfall">
              <i class="iconfont iconyuliang"></i>
              <div class="text">雨量</div>
              <div class="info" v-if='item["040206"]&&item["040206"].value'>{{item["040206"].value}}</div>
              <div class="info" v-else>--</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="main centerbox" v-else>暂无数据</div> -->
    <!-- <Nodata v-else class="nodata"  /> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import filter from "../../../../utils/filter";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Nodata from "../../../../components/Nodata/index.vue";
import { publicAPIModule } from "@/store/modules/public";
@Component({ components: { Nodata } })
export default class extends Vue {
  public activeName: string = "0";
  public activeInfo: number = 1;
  stationNames: any = [];
  stationObj: any = {
    "100435539": {
      Temperature: "6.2s℃", //温度
      Humidity: "77.10%", //湿度
      windSpe: "16m/s", //风速
      wind: "二级", //风力
      directionTheWind: "东北(44')", //风向
      rainfall: "7.00mm", //雨量
    },
  };
  // tab 被选中时触发 回调参数：被选中的标签 tab 实例
  public handleClick(tab: any, event: any) {
    // console.log(tab, event);
  }

  get stationName_options() {
    return publicAPIModule.queryHasDataStationsList;
  }

  get auxiliaryEvn() {
    let getterStationHj = GetSocketModule.getterStationHj || {};
    let stationName_options = this.stationName_options || [];
    console.log(stationName_options)
    let option = [];
    stationName_options.map((k) => {
      option.push(k.code);
    });
    let hjList = [];
    for (let key in getterStationHj) {
      if (option.indexOf(key) > -1) {
        let obj = {
          "040201": {
            value: getterStationHj[key]["040201"].value || 0,
            unit: getterStationHj[key]["040201"].unit || "",
          }, //风速监测
          "040202": {
            value: getterStationHj[key]["040202"].value || 0,
            unit: getterStationHj[key]["040202"].unit || "",
          }, //风向
          "040203": {
            value: getterStationHj[key]["040203"].value || 0,
            unit: getterStationHj[key]["040203"].unit || "",
          }, //温度监测
          "040102": {
            value: getterStationHj[key]["040102"].value || 0,
            unit: getterStationHj[key]["040102"].unit || "",
          }, //温度监测
          "040204": {
            value: getterStationHj[key]["040204"].value || 0,
            unit: getterStationHj[key]["040204"].unit || "",
          }, //湿度监测
          "040103": {
            value: getterStationHj[key]["040103"].value || 0,
            unit: getterStationHj[key]["040103"].unit || "",
          }, //湿度监测
          "040206": {
            value: getterStationHj[key]["040206"].value || 0,
            unit: getterStationHj[key]["040206"].unit || "",
          }, //  雨量
          myFeng: filter.feng(getterStationHj[key]["040201"].value) || 0, //风力,根据风速判断 feng(040201.value)
          name: getterStationHj[key]["stationName"],
          id: getterStationHj[key]["stationId"],
        };
        hjList.push(obj);
      }
    }
    console.log(112,hjList);

    return hjList;
  }

  // 温度湿度样式变量切换
  changeActiveInfo() {
    this.activeInfo === 1 ? (this.activeInfo = 2) : (this.activeInfo = 1);
  }
  mounted(): void {
    setInterval(this.changeActiveInfo, 2000);
    // this.fetch();
  }
  fetch() {
    (this as any).$services
      .getAuxiliaryEvn()
      .then((result: any) => {
        if (result) {
          var data = result.data;
          // console.log(11111, data);

          let obj: any = {};
          obj = (filter as any).dataToRes(data);
          this.stationObj = obj;
          let stationNames = [];
          for (let key in obj) {
            stationNames.push({
              name: obj[key].stationName,
              id: key,
            });
          }
          this.stationNames = stationNames;
        } else {
          this.stationNames = [];
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.stationNames = [];
      });
  }
}
</script>

<style lang="scss" scoped>
.environmental-info {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.3rem);
    box-sizing: border-box;
    padding: 0 0.1rem;
    > div {
      width: 100%;
      height: 100%;
      .main-tab {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        > div {
          width: 100%;
          height: 50%;
          > div {
            width: 1.05rem;
            height: 0.58rem;
            opacity: 0.5;
            position: relative;
            display: flex;
            place-content: center center;
            flex-flow: column nowrap;
            align-items: center;
            margin: 0 0.1rem;
            transition: all 0.5s linear;
            .iconfont {
              font-size: 0.2rem;
              position: absolute;
              top: 0.2rem;
              left: 0.2rem;
            }
            .text {
              width: 40%;
              font-size: 0.14rem;
              margin-left: auto;
              line-height: 0.18rem;
            }
            .info {
              width: 40%;
              font-size: 0.12rem;
              margin-left: auto;
              white-space: nowrap;
            }
          }

          .Temperature,
          .wind {
            background: url("../../../../assets/img/AuxiliaryMonitor/circle-yellow.png")
              no-repeat center center;
            background-size: 100% 100%;
            .iconfont {
              color: rgba(224, 155, 15, 1);
            }
          }
          .Humidity,
          .directionTheWind {
            background: url("../../../../assets/img/AuxiliaryMonitor/circle-blue.png")
              no-repeat center center;
            background-size: 100% 100%;
            .iconfont {
              color: rgba(49, 153, 247, 1);
            }
          }
          .windSpe,
          .rainfall {
            background: url("../../../../assets/img/AuxiliaryMonitor/circle-green.png")
              no-repeat center center;
            background-size: 100% 100%;
            .iconfont {
              color: rgba(21, 255, 97, 1);
            }
          }
        }
        .activeInfoStyle {
          > div {
            width: 1.24rem;
            height: 0.71rem;
            opacity: 1;
            transition: all 0.5s linear;
            .iconfont {
              font-size: 0.24rem;
              top: 0.24rem;
              left: 0.24rem;
            }
            .text {
              font-size: 0.16rem;
              line-height: 0.22rem;
            }
            .info {
              font-size: 0.14rem;
            }
          }
        }
      }
    }
  }
  .nodata {
    height: calc(100% - 0.3rem);
  }
}
</style>
<style lang="scss">
.environmental-info {
  .el-tabs__content {
    height: calc(100% - 0.55rem);
  }
}
</style>